{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>首页-空气污染数据可视化平台</title>
    <meta name="description" content="首页-空气污染数据可视化平台">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{% static 'css/font-awesome.min1.css' %}">
    <link rel="stylesheet" href="{% static 'css/simple-line-icons1.css' %}">
    <link rel="stylesheet" href="{% static 'css/linea-basic1.css' %}">
    <link rel="stylesheet" href="{% static 'css/pe-icon-7-stroke2.css' %}">
    <link rel="stylesheet" href="{% static 'css/countrySelect.min1.css' %}">
    <link rel="stylesheet" href="{% static 'css/perfect-scrollbar1.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min1.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min2.css' %}">
    <link rel="stylesheet" href="{% static 'css/presets1.css' %}">
    <link rel="stylesheet" href="{% static 'css/style1.css' %}">
    <link rel="stylesheet" href="{% static 'css/index-011.css' %}">
    <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <link rel="stylesheet" href="{% static 'css/map.css' %}">
</head>
<body class="index-01">
<header class="top-header media">
    <div class="top-left mr-3"><a class="navbar-brand" href="">
        <img src="{% static 'picture/logo1.png' %}" alt="Site Logo"></a>
    </div>
    <div class="top-right media-body">
        <div class="left-content float-left">
            <a href="#" class="sidenav-toggle mr-2" data-toggle="push-menu" role="button">
                <span class="sr-only">切换导航</span>
                <i class="fa fa-bars"> </i>
            </a>
        </div>
        <div class="right-content float-right">
            <div class="country dropdown">
                <div id="country_selector"></div>
            </div>

            <div class="dropdown user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img
                    src="{% static 'picture/1.jpg' %}" class="rounded-circle float-left mr-2" alt="User Image"><span
                    class="status"></span><h4 class="name">{{ username }}</h4></a>
                <ul class="dropdown-menu">
                    <li><a href="{% url 'user:logout' %}"><i class="fa fa-power-off"></i>退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<div class="content-wrapper container-fluid">
    <aside class="left-panel">
        <div class="user-card background-bg" data-image-src="images/bg5.jpg"><a href="#">
            <div class="avatar mr-3 float-left">
                <img class="rounded-circle" src="{% static 'picture/4.jpg' %}" alt="Avatar">
            </div>
            <div class="details">
                <h4 class="name">{{ username }}</h4>
            </div>
        </a></div>
        <nav class="navbar">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button"
                       data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="fa fa-dashboard"> </i>
                        <span class="menu-title">平台主页</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'user:index' %}">数据看板</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button"
                       data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="fa fa-table"></i>
                        <span class="menu-title">空气质量数据</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'dataset:display' %}">展示数据</a>
                        <a class="dropdown-item" href="{% url 'dataset:add' %}">上传数据</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-pie-chart"></i>
                        <span class="menu-title">数据图表</span>
                        <span class="badge danger">14</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'chart:AQI_line_chart' %}">AQI折线图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_pm2_5' %}">PM2.5变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_pm10' %}">PM10变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_so2' %}">So2变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_no2' %}">No2变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_co' %}">Co变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_o3' %}">O3变化趋势图</a>
                        <a class="dropdown-item"
                           href="{% url 'chart:AQI_monthly_distribution' %}">一线城市AQI指标每月分布图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_trend_analysis' %}">中国空气质量趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_distribution' %}">指标分布图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_map_distribution' %}">地图分布图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_level_distribution' %}">空气污染等级分布</a>
                        <a class="dropdown-item"
                           href="{% url 'chart:AQI_concentration_distribution' %}">空气污染浓度分布</a>
                        <a class="dropdown-item"
                           href="{% url 'chart:pollutant_correlation_analysis' %}">污染物相关性分析</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-flask"></i>
                        <span class="menu-title">AQI预测</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'predict:AQI_prediction_lstm' %}">基于LSTM模型</a>
                        <a class="dropdown-item" href="{% url 'predict:AQI_prediction_gru' %}">基于GRU模型</a>
                    </div>
                </li>
            </ul>
        </nav>
    </aside>
    <div class="dashboard-contents">
        <!-- 核心内容展示区 -->
        <div class="contents-inner">
            <div class="row">
                {% block contents_inner %}

                {% endblock %}
            </div>
        </div>

        <footer class="site-footer">
            <div class="copyright">
                <div class="float-left">2024</div>
                <div class="float-right">
                    By myself
                </div>
            </div>
        </footer>
    </div>
</div>
<script src="{% static 'js/jquery-3.2.1.slim.min.js' %}"></script>
<script src="{% static 'js/plugins.js' %}"></script>
<script src="{% static 'js/raphael-min1.js' %}"></script>
<script src="{% static 'js/morris1.js' %}"></script>
<script src="{% static 'js/chartist.min1.js' %}"></script>
<script src="{% static 'js/chartist-plugin-legend1.js' %}"></script>
<script src="{% static 'js/jquery.sparkline.min1.js' %}"></script>
<script src="{% static 'js/jquery.flot1.js' %}"></script>
<script src="{% static 'js/jquery.flot.pie1.js' %}"></script>
<script src="{% static 'js/jquery.flot.resize1.js' %}"></script>
<script src="{% static 'js/jquery.flot.spline1.js' %}"></script>
<script src="{% static 'js/charts.init1.js' %}"></script>
<script src="{% static 'js/owl.carousel.min1.js' %}"></script>
<script src="{% static 'js/weather1.js' %}"></script>
<script src="{% static 'js/moment.js' %}"></script>
<script src="{% static 'js/fullcalendar.min.js' %}"></script>
<script src="{% static 'js/index-011.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'js/china.js' %}"></script>
<script>$(function () {
    "use strict";
    $('#calendar').fullCalendar();
});</script>
{% block js_code %}

{% endblock %}
</body>
</html>